<template>
  <div class="conflict-dashboard">
    <div class="dashboard-header">
      <h3>冲突评估仪表盘</h3>
    </div>
    
    <div class="dashboard-content">
      <div class="risk-compass">
        <div class="compass-container" ref="compassContainer">
          <!-- 外层环：升级风险 -->
          <div class="compass-ring outer-ring">
            <div class="ring-fill" :style="{ transform: `rotate(${180 * escalationRisk / 100}deg)` }"></div>
            <div class="ring-label">升级风险: {{ escalationRisk }}%</div>
          </div>
          
          <!-- 内层环：退化风险 -->
          <div class="compass-ring inner-ring">
            <div class="ring-fill" :style="{ transform: `rotate(${180 * degradationRisk / 100}deg)` }"></div>
            <div class="ring-label">退化风险: {{ degradationRisk }}%</div>
          </div>
          
          <!-- 指针：综合严重程度 -->
          <div class="severity-pointer" :style="{ transform: `rotate(${severityAngle}deg)` }">
            <div class="pointer-stem"></div>
            <div class="pointer-head"></div>
          </div>
          
          <div class="severity-indicator">
            <div class="severity-value">{{ severityValue }}/5</div>
            <div class="severity-label">严重程度</div>
          </div>
        </div>
      </div>
      
      <div class="issues-panel">
        <h4>检测到的问题</h4>
        <div class="issues-list">
          <div 
            v-for="(issue, index) in detectedIssues" 
            :key="index"
            class="issue-item"
            :class="`confidence-${issue.confidence}`"
            @click="toggleIssue(index)"
          >
            <div class="issue-header">
              <div class="issue-type">{{ issue.type }}</div>
              <div class="issue-severity">
                <div class="severity-dots">
                  <span 
                    v-for="n in 5" 
                    :key="n" 
                    class="severity-dot"
                    :class="{ active: n <= issue.severity }"
                  ></span>
                </div>
              </div>
              <div class="issue-toggle">
                <i class="fas" :class="expandedIssues[index] ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
              </div>
            </div>
            
            <div class="issue-details" v-if="expandedIssues[index]">
              <div class="evidence-list">
                <div 
                  v-for="(evidence, evidenceIndex) in issue.evidence" 
                  :key="evidenceIndex"
                  class="evidence-item"
                >
                  <div class="evidence-quote">{{ evidence }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { PropType } from 'vue';
import type { DetectedIssue, RiskEvaluation } from '../../types/analysis';

const props = defineProps({
  detectedIssues: {
    type: Array as PropType<DetectedIssue[]>,
    required: true,
    default: () => []
  },
  riskEvaluation: {
    type: Object as PropType<RiskEvaluation>,
    required: true,
    default: () => ({
      escalationRisk: 0,
      degradationRisk: 0
    })
  }
});

// 状态管理
const expandedIssues = ref<Record<number, boolean>>({});

// 计算属性
const severityLevels: Record<number, string> = {
  1: '低',
  2: '中',
  3: '高',
  4: '严重',
  5: '危机'
};

const confidenceLevels: Record<string, string> = {
  high: '高',
  medium: '中',
  low: '低'
};

const escalationRisk = computed(() => props.riskEvaluation?.escalationRisk ?? 0);

const degradationRisk = computed(() => props.riskEvaluation?.degradationRisk ?? 0);

const severityValue = computed(() => {
  if (props.detectedIssues.length === 0) return 0;
  
  // 计算平均严重程度
  const totalSeverity = props.detectedIssues.reduce((sum, issue) => sum + issue.severity, 0);
  return Math.round((totalSeverity / props.detectedIssues.length) * 10) / 10;
});

const severityAngle = computed(() => {
  // 将严重程度（1-5）映射到角度（-90到90度）
  return -90 + (severityValue.value / 5) * 180;
});

// 方法
const toggleIssue = (index: number) => {
  expandedIssues.value[index] = !expandedIssues.value[index];
};

const isIssueExpanded = (index: number): boolean => {
  return expandedIssues.value[index] || false;
};

const getSeverityColor = (severity: number): string => {
  if (severity >= 4) return '#FF3860';
  if (severity >= 3) return '#FF8800';
  if (severity >= 2) return '#FFD700';
  return '#64748b';
};

const getSeverityLabel = (severity: number): string => {
  return severityLevels[severity] || severityLevels[1];
};

const getConfidenceLabel = (confidence: string): string => {
  return confidenceLevels[confidence] || confidenceLevels.low;
};
</script>

<style scoped>
.conflict-dashboard {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dashboard-header {
  margin-bottom: 1.5rem;
}

.dashboard-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: #1a2b4e;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* 风险罗盘样式 */
.risk-compass {
  display: flex;
  justify-content: center;
  align-items: center;
}

.compass-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.compass-ring {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
}

.outer-ring {
  width: 100%;
  height: 100%;
  background: #f1f5f9;
}

.inner-ring {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  background: #f8fafc;
}

.ring-fill {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  background: conic-gradient(
    from 0deg at 0% 50%,
    #FF3860 0%,
    #FFD700 50%,
    #00C781 100%
  );
  transform-origin: left center;
}

.ring-label {
  position: absolute;
  bottom: 10%;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.inner-ring .ring-label {
  font-size: 0.7rem;
}

.severity-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 4px;
  transform-origin: left center;
  z-index: 10;
}

.pointer-stem {
  position: absolute;
  width: 80%;
  height: 100%;
  background: #1a2b4e;
  left: 0;
}

.pointer-head {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #1a2b4e;
}

.severity-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.severity-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a2b4e;
}

.severity-label {
  font-size: 0.75rem;
  color: #64748b;
}

/* 问题列表样式 */
.issues-panel {
  display: flex;
  flex-direction: column;
}

.issues-panel h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: #1a2b4e;
}

.issues-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 300px;
  overflow-y: auto;
}

.issue-item {
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.issue-item.confidence-high {
  border-left: 3px solid #2A5CFF;
}

.issue-item.confidence-medium {
  border-left: 3px solid #2A5CFF;
  opacity: 0.7;
}

.issue-item.confidence-low {
  border-left: 3px dashed #2A5CFF;
}

.issue-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.issue-type {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a2b4e;
}

.issue-severity {
  margin-right: 1rem;
}

.severity-dots {
  display: flex;
  gap: 2px;
}

.severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
}

.severity-dot.active {
  background: #FF3860;
}

.issue-toggle {
  color: #64748b;
  font-size: 0.75rem;
}

.issue-details {
  padding: 0 1rem 1rem 1rem;
  border-top: 1px solid #e2e8f0;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.evidence-item {
  background: white;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.evidence-quote {
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.5;
  position: relative;
  padding-left: 1rem;
}

.evidence-quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.5rem;
  color: #FF3860;
  line-height: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .compass-container {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }
}

</style>
